<script setup>
import {ref, reactive, onMounted, nextTick} from 'vue'
import {menuList, userGetMenu, userSetMenu} from "../../../api/index.js";
import {Plus} from "@element-plus/icons-vue";
import {useRoute} from 'vue-router'
const route = useRoute()
onMounted(()=>{
  userGetMenu().then(({data})=>{
    console.log(data)
    permissionData.value = data.data
  })
  getListData()
})
const tableData = reactive({
  list:[],
  total:0
})
const open = (rowData = {})=>{
      dialogFormVisible.value = true
      nextTick(()=>{
        if(rowData){
          Object.assign(form,{id:rowData.id,name:rowData.name})
          treeRef.value.setCheckedKeys(rowData.permission)
        }
      })
}
//树形结构菜单权限数据
const permissionData = ref([])
//form的数据
const form = reactive({
  id:"",
  name:"",
  permissions:""
})
const dialogFormVisible = ref(false)
const beforeClose = ()=>{
  dialogFormVisible.value = false
  formRef.value.resetFields()
  treeRef.value.setCheckedKeys(defaultKeys)
}
const defaultKeys = [4,5]
const treeRef = ref()
const formRef = ref()
const confirm = async (formEl)=>{
    if(!formEl){
      return ;
    }
    await formEl.validate((valid,fields)=>{
        if(valid){
          const permissions = JSON.stringify(treeRef.value.getCheckedKeys())
          userSetMenu({name:form.name,
          permissions,id:form.id}).then(({data})=>{
              console.log(data)
              beforeClose()
              getListData()
          })
        }else{
          console.log('error submit!!!',fields)
        }
    })
}
const rules = reactive({
    name:[{
      required: true,
      trigger: 'blur',
      message: "请输入权限名称"
    }]
})
const paginationData = reactive({
  pageNum:1,
  pageSize:10
})
const getListData = ()=>{
  menuList(paginationData).then(({data})=>{
      const {list,total} = data.data
      tableData.list = list
      tableData.total = total
  })
}
const handleSizeChange = (val)=>{
    paginationData.pageSize = val
    getListData()
}
const handleCurrentChange = (val)=>{
  paginationData.pageNum = val
  getListData()
}
</script>

<template>
    <panel-head :route="route"></panel-head>
  <div class="btns">
    <el-button size="small" type="primary" :icon="Plus" @click="open(null)">新增</el-button>
  </div>
    <el-table
      :data="tableData.list" style="width: 100%">
      <el-table-column prop="id" label="id"></el-table-column>
      <el-table-column prop="name" label="昵称"></el-table-column>
      <el-table-column prop="permissionName" label="菜单权限" width="500px"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="open(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-info">
      <el-pagination
          v-model:currentPage="paginationData.pageNum"
          :page-size="paginationData.pageSize"
          :background="false"
          layout="total,prev,pager,next"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          size="small">
      </el-pagination>
    </div>

    <el-dialog
    v-model="dialogFormVisible"
    :before-close="beforeClose"
    title="添加权限"
    width="500">
      <el-form
      ref="formRef"
      label-width="100px"
      label-position="left"
      :rules="rules"
      :model="form">
          <el-form-item v-show="false"
          prop="id">
            <el-input v-model="form.id"></el-input>
          </el-form-item>
          <el-form-item label="名称" prop="name">
              <el-input v-model="form.name" placeholder="请填写权限名称"></el-input>
          </el-form-item>
          <el-form-item label="权限" prop="permissions">
            <el-tree
            ref="treeRef"
            :data="permissionData"
            style="max-width: 600px"
            node-key="id"
            show-checkbox
            :default-checked-keys="defaultKeys"
            :default-expanded-keys="[2]">

            </el-tree>
          </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="confirm(formRef)">确认</el-button>
        </div>
      </template>
    </el-dialog>
</template>

<style scoped lang="less">
.btns{
  padding: 10px 0 10px 10px;
  background-color: #ffffff;
}
</style>